<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<script>
    /**
     * window.outerWidth/Height 、window.innerWidth/Height 与浏览器窗口大小有关，所以浏览器窗口缩放，相应的值就会产生变化
     * window.outerWidth/Height 是指浏览器整个窗口的大小，而window.innerWidth/Height 是浏览器除去菜单栏书签栏等的窗口大小
     *
     * window.screen 相关的值与电脑屏幕的大小有关，所以浏览器窗口缩放与它无关，screen.height/width 就是指电脑屏幕的大小，
     * 而 screen.availHeight/Width 是指电脑屏幕可利用的大小，会除去顶部和底部的菜单栏（如果有的话）
     *
     * window.screenLeft/Top 是指浏览器窗口距离电脑屏幕最左边和最顶部的大小，会产生负值，也就是窗口放在最左边之后再往左移动，顶部也是一样
     *
     * innerWidth或outerWidth等属性不兼容IE9以下浏览器
     *  小写的screen 与大写的Screen是不一样的 存在兼容性问题
     *  小写的screen不存在兼容性问题
    */
</script>
</body>
</html>